import React, { useEffect, useState } from 'react'
import MyNavbar from '../../../components/MyNavbar'
import styles from './css/index.module.css'
import request from '../../../api/request'
import { useParams } from 'react-router-dom'
import imageNo from '../../../assets/imageNo/image1.png'
import dayjs from 'dayjs'
import { MessageOutline, StarFill, StarOutline } from 'antd-mobile-icons'
import { Avatar, Popup, Toast } from 'antd-mobile'
function Index() {

    const { sickCircleId } = useParams()
    // const [sp]=useSearchParams()
    // const spObj=useMemo(()=>Object.fromEntries(sp),[sp])
    // const sickCircleId=id

    const [data, setData] = useState([])
    const [visible5, setVisible5] = useState(false)

    //  病友圈详情接口
    useEffect(() => {
        request.get('/user/sickCircle/v1/findSickCircleInfo', {
            params: {
                sickCircleId: sickCircleId
            }
        }).then((res) => {
            console.log(res);
            setData(res.data.result)
        })
    }, [])

    const [isZan, setIsZan] = useState(false)
    const zan = () => {
        if (isZan === false) {
            // 请求收藏接口
            request.post('/user/verify/v1/addUserSickCollection', {
                sickCircleId: sickCircleId,
            }).then((res) => {
                console.log(res);
                setIsZan(true)
                Toast.show({
                    icon: <StarFill />,
                    content: '已收藏',
                })

                data.collectionNum++
            })
        } else {
            // 取消收藏接口
            request.delete('/user/verify/v1/cancelSickCollection', {
                params: {
                    sickCircleId: sickCircleId,
                }
            }).then((res) => {
                console.log(res);
                setIsZan(false)
                Toast.show({
                    icon: <StarOutline />,
                    content: '取消收藏',
                })

                data.collectionNum--
            })
        }
    }

    const [page, setPage] = useState(1)
    const [count, setCount] = useState(13)
    const [list, setList] = useState([])

    // 病友圈评论列表接口
    useEffect(() => {
        request.get('/user/sickCircle/v1/findSickCircleCommentList', {
            params: {
                sickCircleId: sickCircleId,
                page: page,
                count: count
            }
        }).then((res) => {
            console.log(res);
            setList(res.data.result)
        })
    }, [sickCircleId, page, count])

    const [inputValue, setInputValue] = useState('')
    const fs = (e) => {
        if (e.key === 'Enter') {
            request.post('/user/sickCircle/verify/v1/publishComment', {
                sickCircleId: sickCircleId,
                content: inputValue
            }).then((res) => {
                console.log(res);
                Toast.show({
                    icon: <MessageOutline />,
                    content: '评论成功',
                })
                setInputValue('')
                // setPage(1)
            })
        }
    }
    return (
        <div className={styles.box}>
            <MyNavbar title={data.title} />
            <div>
                <a><p>{'[病症]'}</p></a>
                <span>{data.disease}</span>
            </div>
            <div>
                <a><p>{'[科室]'}</p></a>
                <span>{data.department}</span>
            </div>
            <div>
                <a><p>{'[病症详情]'}</p></a>
                <span>{data.detail}</span>
            </div>
            <div>
                <a><p>{'[治疗经历]'}</p></a>
                <span>
                    <p style={{ display: 'flex', 'justify-content': 'space-between' }}>
                        <span>{data.treatmentHospital && data.treatmentHospital.length > 0 ? data.treatmentHospital : '无'}</span>
                        <span>{dayjs(data.treatmentStartTime).format('YYYY-MM-DD hh:mm:ss')}</span>
                    </p>
                    <p>{data.treatmentProcess}</p>
                </span>
            </div>
            <div>
                <a><p>{'[相关图片]'}</p></a>
                {data.picture ? <img style={{ width: '100%', height: '200px' }} src={data.picture} alt="" /> : <img style={{ width: '100%', height: '200px' }} src={imageNo} alt="" />}
            </div>
            <div className={styles.pl} style={{ fontSize: '18px' }}>
                <span> {isZan === true ? <StarFill style={{ color: '#FFAB26' }} onClick={() => zan()} /> : <StarOutline style={{ color: '#FFAB26' }} onClick={() => zan()} />}{data.collectionNum}</span>&emsp;
                <span><MessageOutline onClick={() => { setVisible5(true) }} style={{ color: '#3087EA' }} />{data.commentNum}</span>
            </div>


            <Popup
                visible={visible5}
                onMaskClick={() => {
                    setVisible5(false)
                }}
                bodyStyle={{
                    borderTopLeftRadius: '8px',
                    borderTopRightRadius: '8px',
                    minHeight: '40vh',
                    background: 'transparent',
                    overflow: 'scroll',
                    height: '100vh',
                    position: 'fixed',
                    top: 0
                }}
            >
                <div style={{ forceRender: true, height: '100vh', padding: '40px 0 0 0' }}>
                    {
                        list.map((item) => {
                            return <div key={item.commentId} className={styles.content} style={{ forceRender: true, display: 'flex', padding: '10px 0 0 10px' }}>
                                {/* 用户头像 */}
                                <Avatar style={{ borderRadius: '50%', width: '35px', height: '35px', marginRight: '10px', }} src={item.headPic} />
                                <div style={{ forceRender: true, minWidth: '150px', minHeight: '20px', maxWidth: '70vw', padding: '10px', borderRadius: '5px', background: '#fff' }}>
                                    {/* 昵称 发表时间 */}
                                    <p>
                                        <span style={{ color: '#ccc' }}>{item.nickName}</span>&emsp;
                                    </p>
                                    {/* 评论内容 */}
                                    <div>
                                        {item.content}
                                    </div>
                                    <p>
                                        <span style={{ color: '#ccc' }}>{dayjs(item.createTime).format('DD/MM/YYYY')}</span>
                                    </p>
                                </div>
                            </div>
                        })
                    }
                    <div style={{ forceRender: true, marginTop: '10px', position: 'relative', bottom: '0px', left: '0px', width: '100vw', display: 'flex', 'justify-content': 'center' }}>
                        <div style={{ forceRender: true, width: '50px', height: '50px', background: 'black', color: 'white', borderRadius: '50%', textAlign: 'center', lineHeight: '50px' }} onClick={()=>setVisible5(false)}>X</div>
                        <input style={{ forceRender: true, border: 'none', outline: 'none', background: 'black', height: '50px', padding: '0 20px', color: 'white', borderRadius: '50px' }} placeholder='在此留下高见吧！！！' type="text"
                            value={inputValue} onChange={(e) => { setInputValue(e.target.value) }}
                            onKeyDown={fs}
                        />
                    </div>
                </div>


            </Popup>

        </div>
    )
}

export default Index
